<template>
    <a-select mode="multiple" :filter-option="false" show-search :not-found-content="fetching ? undefined : null" @search="fetchEvent" placeholder="请选择" v-model:value="valueId" style="width: 200px"
        :options="userOptions"></a-select>
</template>
<script setup>
import { queryList, queryOne } from '../../api/user'
import Validator from '@/utils/Validator'
// 定义检索值
const searchKey = ref(null)
const fetching = ref(false)
const emit = defineEmits(['update:value']);
const props = defineProps({
    value: {
        type: Object
    }
})

const userOptions = ref([])
const valueId = computed({
    get: () => props.value,
    set: (val) => {
        console.log('修改' + val)
        emit('update:value', val)
    }
});
// 请求查询
function fetchEvent(e) {
    searchKey.value = e;

    fetching.value = true
    //console.log(e.length)
    setTimeout(function () {
        getMatchUsers(e)
    }, 1000)
    // 接口防抖

}
// 获取用户列表
function getMatchUsers(key) {
    if (Validator.isNotEmpty(key) && key == searchKey.value) {
        queryList({
            pageSize: 500,
            pageNum: 1,
            searchKey: key
        }).then(res => {
            console.log(res.content)
            let tarr = res.content
            tarr = tarr.map(ele => {
                ele.label = `${ele.nickName}(${ele.userName})`
                ele.value = ele.id
                return ele
            })
            userOptions.value = tarr
            fetching.value = false
        })
    }
}
</script>